<!--
* @FileDescription: 保存为模板组件
* @Author: yuec621@outlook.com
* @Date: 2024-12-15 12:29:49
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-02-20 12:32:43
-->
<template>
    <!-- <teleport to="body"> -->
    <vxe-modal :lock-view="false" :width="660" :height="auto" 
    v-model="state.addModal"
        resize :mask="true" showFooter>
        <template #title>
            <div class="w100 h100 fsc mask_title">保存模板</div>
        </template>
        <template #default>
            <el-row :gutter="20">
                <el-col :span="12" v-for="item in tempList" :key="item.pointId">
                    <div class="tempBox">
                        <div class="titleBox">
                            <span>{{ item.pointId }}</span>
                            <span>{{ item.sensorName }}</span>
                        </div>
                        <p>
                            <svg-icon icon-class="tuli" style="margin-right: 10px;" />{{ item.placeName }}</p>
                    </div>
                </el-col>
                <el-col :span="24">
                    <p class="formLabel">
                        <span>模板名称</span>
                        <el-input v-model="state.templateName" placeholder="请输入"></el-input>
                    </p>
                </el-col>
            </el-row>
        </template>
        <template #footer>
            <el-button @click="cancel">取消</el-button>
                <el-button type="primary" @click="submitForm">
                    确定
                </el-button>
        </template>
    </vxe-modal>
    <!-- </teleport> -->
</template>
<script setup>
    import {
        computed,
        reactive,
        watchEffect
    } from 'vue';
    import axios from "@/utils/request"
    import {
        searchchannelNoList
    } from '@/api/config'
    import useUserStore from "@/store/modules/user";
    import dayjs from 'dayjs';
    const {
        proxy
    } = getCurrentInstance();
    const calendar = ref(null)
    const userStore = useUserStore();
    const emits = defineEmits([''])
    const props = defineProps({
        tempList: {
            type: Array,
            default: () => {
                return []
            }
        },
        tempShow: {
            type: Boolean,
            default: () => {
                return false
            }
        }
    })
    // 重点
    const state = reactive({
        addModal: false,
        templateName: undefined
    })
    function cancel(){
        state.addModal=false
    }
    function submitForm(){
        let data={
            pointIds:props.tempList.map(item=>{
                return item.pointId
            }),
            templateName:state.templateName
        }
        emits('submitForm',data)
    }

    watchEffect(() => {
        state.addModal = props.tempShow
    })
</script>
<style lang="scss" scoped>
    .tempBox {
        border-radius: 4px;
        background: rgba(91, 109, 128, 0.08);
        padding: 12px 16px 12px 16px;
        color: rgb(23, 29, 36);
        font-size: 16px;
        margin-bottom: 10px;

        .titleBox {
            display: flex;
            justify-content: space-between;
        }

        p {
            display: flex;
            align-items: center;
            margin-bottom: 0 !important;
        }
    }
</style>